<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>小米网后台主页-会员信息页面</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
	<!--导入js组件vue的类库-->
<script type="application/javascript" src="../js/vue.min.js"></script>

	<script type="text/javascript">
//	$(document).ready(function(){
////		loadUser();
//	})
	//连接servlet 获取 数据
//	function loadUser(){
//		$.ajax({
//			url:"getUserList",
//			method:"get",
//			success:function(data){
//				showMsg(data);
//			},
//			error:function(XMLHttpRequest,textStatus,errorThrown){
//				alert("失败"+XMLHttpRequest.status+":"+textStatus+":"+errorThrown);
//			}
//		});
//	}
	//显示用户信息

	//删除用户

	//条件查询

</script>
</head>
<body>
	
	<div class="row" style="width: 100%;">
			<div class="col-md-12">
				<div class="panel panel-default">
					<div class="panel-heading">会员列表</div>
					<div class="panel-body">
					<!-- 条件查询 -->
						<div class="row">
							<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
								<div class="form-group form-inline">
									<span>用户电话</span>
									<input type="text" name="username" class="form-control">
								</div>
							</div>
							<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
								<div class="form-group form-inline">
									<span>EMAIL</span>
									&nbsp;&nbsp;&nbsp;&nbsp;
									<label class="radio-inline">
									  <input type="radio" name="gender" value="男"> 男&nbsp;&nbsp;&nbsp;&nbsp;
									</label>
									<label class="radio-inline">
									  <input type="radio"name="gender" value="女"> 女
									</label>
								</div>
							</div>
							<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
								<button type="button" class="btn btn-primary" id="search">
									<span class="glyphicon glyphicon-search"></span></button>
							</div>
						</div>
				<!-- 列表显示 -->
						<table id="tb_list" class="table table-striped table-hover table-bordered">
							<tr><td>序号</td><td>电话</td><td>Email</td><td>操作</td></tr>
							<!--数据遍历-->
							<!--<tr><td>1</td><td>admin</td><td>123@126.com</td><td>禁言| 密码找回</td></tr>-->
							<!--使用vue双向绑定机制遍历集合-->
							<tr v-for="us in users"><td>{{us.id}}</td><td>{{us.tel}}</td><td>{{us.email}}</td>
								<td><button  @click="edit(us.id)">修改</button>| <button @click="del(us.id)">删除</button></td></tr>

						</table>

						<!--修改模态窗体-->
						<div class="modal fade" id="modalModify">
							<div class="modal-dialog" >
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal">X</button>
										<h4 class="modal-title">用户信息修改：</h4>
									</div>
									<div class ="modal-body" >
										<div class="input-group">
											<span class="input-group-addon">ID:</span>
											<input class="input-sm" type="text" id="id" placeholder="1" v-model="userInfo.id"/>
										</div>
										<br/>
										<div class="input-group">
											<span class="input-group-addon">TEL:</span>
											<input class="input-sm" type="text" id="tel" placeholder="1" v-model="userInfo.tel"/>
										</div>
										<br/>
										<div class="input-group">
											<span class="input-group-addon">EMAIL:</span>
											<input class="input-sm" type="text" id="email" placeholder="1" v-model="userInfo.email"/>
										</div>
										<br/>
										<div class="input-group">
											<span class="input-group-addon">INVATITION:</span>
											<input class="input-sm" type="text" id="invatition" placeholder="1" v-model="userInfo.invatition"/>
										</div>

									</div>
									<div class = "modal-footer">
										<button type="button" class="btn btn-default" data-dismiss ="modal">取消</button>
										<button type="button" class="btn btn-primary" id="modify">修改</button>
									</div>
								</div>
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>
 <script>
	 <!--与模态框绑定的对象-->
   var info = 	 new Vue({
		el:'#modalModify',
	    data:{
		    userInfo:{'id':2,'tel':'12345678901','email':'123@126.com','invitation':'xx'}
		}
   });
     <!--与表格绑定的对象-->
     var userInfos = new Vue({
		el:'#tb_list',  //将id为tb_list的html标签与vue对象绑定
		data:{//对象的属性
		    users:[{'id':2,'tel':'12345678901','email':'123@126.com'},
                {'id':3,'tel':'12345678901','email':'456@126.com'},
                {'id':4,'tel':'12345678901','email':'789@126.com'}
                ]
		},
		methods:{//对象的行为
		    edit:function(id){
		        //alert("edit"+id);
		        $.ajax({
					url:'getUserInfoById/'+id,
					type:'get',
					dataType:'json',
					success:function(res){
						if(res.statusCode==200){
//						    console.log(res.data);
						    info.userInfo = res.data;  //将id查询的对象赋予和模态狂绑定数据
						    $("#modalModify").modal("show");//显示模态框
						}
					}
				});
			},
			del:function(id){
                //alert("del"+id);
                $.ajax({
					url:'delUser?id='+id,
					type:"delete",
					dataType:'json',
					success:function(res){
					    if(res.statusCode==200){
					        alert("ok:"+res.msg);
                            loadUsers();//重新加载数据
						}
					}

				});
			}

		}
	});
//    修改关闭模态窗体
    $("#modify").click(function(){
        //alert("close");
        $.ajax({
			url:'modify',
			type:'PUT',
			data: JSON.stringify(info.userInfo),  //将json对象转为json字符串
			/*contentType:'application/json',*/
			contentType: 'application/json',
			dataType:'json',
			success:function(res){
			    if(res.statusCode==200){
			        //alert(res.msg);
                    $("#modalModify").modal("hide");//关闭模态框
                    loadUsers();//重新加载数据
				}
			}
		});

	})
//    jquery工厂函数
    $(function(){
        loadUsers();
	});
//    加载数据
    function loadUsers(){
        //alert("a");
//        在页面加载完成时，向后端发出ajax请求
        $.ajax({
            url:'getSysUser',   //请求路径
            type:'GET',  //请求方式
//			data:'',  //请求的数据
            dataType:'json',  //响应的数据类型
            success:function (res) {
                //console.log(res);
                userInfos.users = res;
            }
        });
    }
 </script>
</body>
</html>